<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 空白页 -->
		<!-- #ifdef APP-PLUS -->
		<u-no-network @retry="init"></u-no-network>
		<!-- #endif -->
		<shopro-empty v-if="!hasTemplate" :image="$IMG_URL + '/imgs/empty/template_empty.png'"
			tipText="暂未找到模板，请前往装修~"></shopro-empty>

		<view v-else-if="isConnected && isRefresh" class="content-box">
			<!--     -->
			<image class="content-box-bg" src="@/static/images/index_bg.png"></image>
			<!-- 导航栏 -->
			<!-- 	<home-head
				v-if="headSwiperList && headSwiperList.length"
				:scrollTop="scrollTop"
				borderRadius="0"
				:navTitle="initShop.name"
				:list="headSwiperList"
			></home-head> -->
			<!-- 	<u-navbar :is-back="false" title="商城" background="transparent" :border-bottom="false" title-color="#ffffff">
			</u-navbar> -->
			<!-- 自定义模块 -->
			<view class="template-box" :style="{ paddingTop: $u.addUnit($u.sys().statusBarHeight, 'px') }">
				<view class="navbar">商城</view>
				<swiper class="swiper-box" @change="onChange" :indicator-dots="true" :circular="true" :autoplay="true"
					:interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in headSwiperList" :key="index" @tap="onSwiper(index)"
						class="swiper-item">
						<image :src="item.image" mode="aspectFill" style="width: 100%;height: 100%;"></image>
					</swiper-item>
				</swiper>
				<block v-for="(item, index) in homeTemplate" :key="item.id">
					<!-- 轮播 -->
					<!-- 		<sh-banner v-if="item.type === 'banner' " :Px="40" :Py="0" :borderRadius="20" :height="262"
						:list="headSwiperList"></sh-banner>
						 -->

					<!-- 搜索 -->
					<sh-search v-if="item.type === 'search'"></sh-search>

					<!-- 滑动宫格 -->
					<sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list"
						:oneRowNum="item.content.style"></sh-grid-swiper>

					<!-- 推荐商品 -->
					<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'"
						:detail="item.content"></sh-hot-goods>
					<!-- 广告魔方 -->
					<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
					<!-- 优惠券 -->
					<sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>
					<!-- 秒杀-->
					<sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill>
					<!-- 拼团 -->
					<sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>
					<!-- 富文本 -->
					<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
					<!-- 功能标题 -->
					<sh-title-card v-if="item.type === 'title-block'" :title="item.content.name"
						:bgImage="item.content.image" :titleColor="item.content.color"></sh-title-card>
					<!-- 直播 -->
					<!-- #ifdef MP-WEIXIN -->
					<sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>
					<!-- #endif -->
				</block>
				<!--        跳转其他小程序-->
				<view class="navigation-box" @click="navigatorApp" v-if="showNavigation">
					<image src="@/static/images/yfyc_icon.png" mode="" class="navigation-icon"></image>
				</view>

			</view>

			<!-- 分类选项卡 -->
			<sh-category-tabs
				v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
				:enable="enable" :styleType="categoryTabsData.style"
				:tabsList="categoryTabsData.category_arr"></sh-category-tabs>
			<!-- 登录提示 -->
			<shopro-auth-modal></shopro-auth-modal>
			<shopro-avtar-popup ref="avtarPopup" :showNotice="showNotice" @closePopup="closePopup"></shopro-avtar-popup>

			<!-- 悬浮按钮 -->
			<shopro-float-btn></shopro-float-btn>
			<!-- 连续弹窗提醒 -->
			<shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal>
			<!-- 隐私协议 -->
			<!-- #ifdef APP-PLUS -->
			<privacy-modal v-if="initShop && initShop.name" v-model="showPrivacy"></privacy-modal>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
			<!-- #endif -->
		</view>
		<u-popup v-model="showFloatBtn" mode="center" border-radius="32">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="title">长按识别小程序</view>
					<view class="erweima">
						<image :src="navigatorImg" :show-menu-by-longpress="true" mode="widthFix"></image>
					</view>
					<view class="lianxi" @click="showFloatBtn=false">我知道了</view>
				</view>
			</view>
		</u-popup>
		<shopro-tabbar :showNavigation="showNavigation" :navigatorImg="navigatorImg"></shopro-tabbar>
	</view>
</template>

<script>
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shSeckill from './components/sh-seckill.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import shSearch from './components/sh-search.vue';
	import shCategoryTabs from './components/sh-category-tabs.vue';

	import privacyModal from './index/privacy-modal.vue';
	import homeHead from './index/home-head.vue';

	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from '@/env';
	import shLive from './components/sh-live.vue';
	// #endif

	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			shBanner,
			shGridSwiper,
			shGroupon,
			shHotGoods,
			shAdv,
			shCoupon,
			shSeckill,
			shRichtext,
			shTitleCard,
			shSearch,
			shCategoryTabs,

			privacyModal,
			homeHead,

			// #ifdef MP-WEIXIN
			shLive
			// #endif
		},
		data() {
			return {
				showNotice: false,
				// #ifdef MP-WEIXIN
				HAS_LIVE: HAS_LIVE,
				// #endif
				isRefresh: true,

				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				scrollTop: 0,
				showNavigation: false,
				showFloatBtn: false,
				navigatorImg: ''
			};
		},
		computed: {
			...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin']),
			showAvart() {
				this.showNotice = true;
			},
			closePopup() {
				this.showNotice = false;
			},
			// 头部模块数据
			headSwiperList() {
				console.log(this.homeTemplate)
				if (this.homeTemplate?.length) {
					return this.homeTemplate[0]?.content?.list;
				}
			},
			// 分类选项卡数据
			categoryTabsData() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[this.homeTemplate.length - 1]?.content;
				}
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShow() {
			let that = this;
			this.enable = true;
			this.isLogin && this.getCartList();
			// 网络变化检测
			uni.onNetworkStatusChange(res => {
				this.isConnected = res.isConnected;
				res.isConnected && this.init();
			});
			this.getIndexData()
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			// #ifdef APP-VUE
			// plus.runtime.disagreePrivacy();
			console.log(plus.runtime.isAgreePrivacy(), 1111111111);
			// app隐私协议弹窗
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// #endif
		},
		methods: {
			...mapActions(['appInit', 'getTemplate', 'getCartList']),
			getIndexData() {
				this.$http('common.index').then(res => {
					this.showNavigation = res.data.is_check
					this.navigatorImg = res.data.img
				})
			},
			// 初始化
			init() {
				this.isRefresh = false;
				return Promise.all([this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
					this.isRefresh = true;
				});
			},
			onSwiper(e) {
				this.$tools.routerTo(this.list[e].path);
			},
			// 跳转其他小程序
			navigatorApp() {
				if (this.showNavigation && this.navigatorImg) {
					this.showFloatBtn = true
				}
				if (this.showNavigation && !this.navigatorImg) {
					uni.navigateToMiniProgram({
						appId: 'wxb831b7f7207347f8',
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		
		.rect {
			width: 295px;
			height: 400px;
			background: #FEE1D9;
			border-radius: 16px;
			text-align: center;
			position: relative;
		
			.title {
				font-weight: 600;
				font-size: 22px;
				color: #011651;
				line-height: 30px;
				padding-top: 32px;
			}
		
			.erweima {
				width: 215px;
				height: 215px;
				background: #ffffff;
				box-shadow: 0px 5px 23px 0px #FF795F;
				border-radius: 15px;
				margin: 20px auto;
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					width: 181px;
					height: 181px;
				}
			}
		
			.lianxi {
				width: 261px;
				height: 50px;
				background-color: #FF4F59;
				line-height: 50px;
				text-align: center;
				color: #FFFFFF;
				font-weight: 600;
				font-size: 15px;
				margin: 0 auto;
				border-radius: 50px;
			}
		}
	}


	.home-wrap {
		background-color: #FBFBFB;
	}

	.content-box {
		min-height: 100vh;
		background-color: #FBFBFB;
		box-sizing: border-box;
		position: relative;

		.content-box-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 800rpx;
			z-index: 1;
		}
	}

	.template-box {
		padding-top: 20rpx;
		position: relative;
		z-index: 99;

		.swiper-box {
			height: 262rpx;
			margin: 0 16rpx 16rpx;

			.swiper-item {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				overflow: hidden;
			}
		}

		.navbar {
			height: 44px;
			margin-bottom: 36rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 44px;
			text-align: center;
		}

		.navigation-box {
			position: fixed;
			right: 0;
			bottom: 180rpx;
			width: 128rpx;
			height: 128rpx;
			z-index: 996;

			.navigation-icon {
				width: 128rpx;
				height: 128rpx;
			}
		}
	}
</style>